<template>
  <div class="chartSize"></div>
</template>

<script>
import echartsMixins from "@/components/echarts/echartsMixins";

export default {
  mixins: [echartsMixins],
  props: {
    /**
     * 值
     */
    value: {
      type: Array,
      default: () => {
        return [100, 200, 300, 100, 200]
      }
    },
    /**
     * x轴名单
     */
    xdata: {
      type: Array,
      default: () => {
        return ["工程咨询单位资格", "工程造价咨询企业资质", "工程设计资质", "工程勘察资质", "安全评价机构资质"]
      }
    },
    /**
     * 标题
     */
    title: {
      type: String,
      default: "中介机构资质类型分布情况"
    },
    loading: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    option() {
      return {
        xAxis: {
          type: 'category',
          data: this.xdata,
          axisLine: {
            lineStyle: {
              color: "#22daff"
            }
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0,//使x轴文字显示全
            formatter: this.formatter
          },
        },
        grid: {
          show: false
        },
        title: {
          text: this.title,
          left: "center",
          top: "6",
          textStyle: {
            color: "#22daff"
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#22daff",
              type: "soild"
            }
          }
        },
        series: []
      }
    }
  },
  methods: {
    /**
     * x轴 文字太长时换行
     * @param params
     * @returns {string}
     */
    formatter(params) {
      let newParamsName = ""
      const provideNumber = 5 //一行显示几个字
      const rowNumber = Math.ceil(params.length / provideNumber)
      if (params.length > provideNumber) {
        for (let p = 0; p < rowNumber; p++) {
          let tempStr = ""
          let start = p * provideNumber
          let end = start + provideNumber
          if (p === rowNumber - 1) {
            tempStr = params.substring(start, params.length)
          } else {
            tempStr = params.substring(start, end) + "\n"
          }
          newParamsName += tempStr
        }
      } else {
        newParamsName = params
      }
      return newParamsName
    },
    /**
     * 更新数据
     */
    updateData(val) {
      let option = {
        series: [
          {
            data: val,
            name: "项目公告",
            type: "bar"
          },
        ],
      }
      this.chart.setOption(option);
    },
    /**
     * 获取本月每一天
     * */
    getCountDays() {
      let curDate = new Date();
      let curMonth = curDate.getMonth();
      curDate.setMonth(curMonth + 1);
      curDate.setDate(0);
      return curDate.getDate();
    },
    /**
     * 获取本月每一天
     * */
    getEveryDay() {
      let dayArry = [];
      let day = this.getCountDays();
      for (let k = 1; k <= day; k++) {
        dayArry.push(k);
      }

      return dayArry;
    }
  },
  mounted() {
    this.updateData(this.value)
  },
  watch: {
    /**
     * 数值
     * @param val
     */
    value(val) {
      this.updateData(val)
    },
    /**
     * 是否进入loading
     * @param val
     */
    loading(val) {
      if (val) {
        this.chart.showLoading();
      } else {
        this.chart.hideLoading();
      }
    }
  },
}
</script>

<style scoped>
.chartSize {
  height: 100%;
  width: 100%;
}
</style>
